
<style lang="less" scoped>
.login {
  padding-top: 10rem;
  width: 100%;
  height: 100%;
  background-image: url("~assets/login-bg.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  position: relative;
}

.logo {
  position: absolute;
  top: -9rem;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 8.25rem;
  height: 8.25rem;
  background: #fff;
  border-radius: 9.66rem;
  margin-bottom: 1.46rem;
  background-image: url("~assets/logo.png");
  background-size: 100% 100%;
}
@media screen and (max-height: 600px) {
  .logo {
    top: -9rem;
  }
}
.title {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
.form {
  padding: 0rem 1.5rem 0rem 1.5rem;
  background: #fff;
  border: 0px solid rgba(175, 198, 236, 1);
  box-shadow: 0rem 1rem 2rem 0rem rgba(67, 128, 255, 0.16);
  border-radius: 1rem;

  .input {
    border: 0px;
    padding: 0px;
    font-size: 1rem;
  }
  .item {
    padding-top: 2.375rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(153, 153, 153, 0.8);
  }
  .code-buttom {
    width: 6.35rem;
    height: 2.41rem;
    border: 1px solid rgba(153, 153, 153, 0.8);
    text-align: center;
    line-height: 2.41rem;
  }
  .submit {
    margin-top: 1.5rem;
    width: 100%;
    height: 2.8rem;
    text-align: center;
    line-height: 2.8rem;
    color: #fff;
    font-size: 1.2rem;
    background: rgba(67, 128, 255, 1);
    border-radius: 4rem;
  }
  .description {
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 100%;
    text-align: center;
  }
  .input-icon {
    width: 1.625rem;
    height: 1.625rem;
    margin: 0rem 0.75rem;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
  }
  .phone-icon {
    background-image: url("~assets/phone.png");
  }
  .code-icon {
    background-image: url("~assets/code.png");
  }
}
</style>
<template>
  <div class="w-100 login d-flex-column align-items-center justify-content-between">
    <!-- <notific-ation></notific-ation> -->
    <div class="w-100 h-100 d-flex-column align-items-center justify-content-center">
      <div class="position-r">
        <div class="logo"></div>
        <p class="title">评分系统登录</p>
      </div>
      <div class="w-100" style="padding: 0rem 1.4rem;">
        <div class="form">
          <div class="w-100 item d-flex-row align-items-center">
            <i class="phone-icon input-icon flex-shrink-0"></i>
            <input @blur="ifPhone" v-model="phone" class="input w-100" type="text" placeholder="请输入手机号" />
          </div>
          <div class="w-100 item d-flex-row align-items-center">
            <i class="code-icon input-icon flex-shrink-0"></i>
            <input v-model="code" class="input w-100" type="text" placeholder="请输入验证码" />
            <div style="margin-left: 1.5rem;" class="code-buttom flex-shrink-0">
              <span v-show="!sendCodeFlag" @click="sendCode">{{codeText}}</span>
              <span v-show="sendCodeFlag">{{overTime}}秒后刷新</span>
            </div>
          </div>
          <div @click="goList" class="submit">立即登录</div>
          <div class="description">
            登录即认为同意
            <a>《用户协议》</a>
          </div>
        </div>
      </div>
    </div>
    <p>版权所有&copy;常州市市政建设工程有限公司</p>
  </div>
</template>
<script>
/**
 * 登录
 */
export default {
  name: "login",
  data() {
    return {
      phone: null,
      isPhone: false,
      code: null,
      codeText: '获取验证码',
      sendCodeFlag: false,
      overTime: 60,
      interval: null
    };
  },
  watch: {
    "overTime": function (newVal) {
      if(newVal === 0) {
        clearInterval(this.interval)
        this.sendCodeFlag = false
      }
    },
    "phone": function (newVal) {
      this.isPhone = false
    }
  },
  methods: {
    ifPhone() {
      if (this.phone && this.phone.length !== 11) {
        this.$NotificAtion('手机号码不正确')
        return ;
      }
      console.log(this);
      this.API.getMemberMobileCheck({
        mobile: this.phone
      })
        .then((result) => {
          if(result.code > 0) {
            this.isPhone = true
            // this.$NotificAtion(result.msg)
            this.sendCode()
          } else {
            this.$NotificAtion(result.msg, 'phoneErr')
          }
        })
        .catch((err) => {
          this.$NotificAtion(err.msg)
          console.error(err)
        });
    },
    sendCode(){
      if (this.sendCodeFlag && this.isPhone) {
        return ;
      }
      this.overTime = 60
      this.sendCodeFlag = true
      this.API.getSmsSend({
        mobile: this.phone
      })
      .then((result) => {
        console.log(result)
        if (result.code > 0) {
          this.$NotificAtion(result.msg)
          this.interval = setInterval(() => {
            this.overTime = this.overTime - 1
          }, 1000);
        } else {
          this.sendCodeFlag = false
          this.$NotificAtion(result.msg) 
        }
      }).catch((err) => {
        console.error(err)
        this.sendCodeFlag = false
        this.$NotificAtion(err.msg) 
      });
    },
    goList() {
      console.log('goPath');
      this.API.getMemberMobilelogin({
        mobile: this.phone,
        captcha: this.code
      })
        .then((result) => {
          console.log(result)
          
          if(result.code > 0){
            this.$NotificAtion('登录成功')
            this.$store.commit('saveToken', {
              access_token: result.data.userinfo.token,
              expires_in: result.data.userinfo.expires_in,
            })
            this.$store.commit('saveUser', result.data.userinfo)
            this.$router.push({ name: "score" });  
          } else {
            this.$NotificAtion(result.msg)
          }
        }).catch((err) => {
          console.error(err)
          this.$NotificAtion(err.msg) 
        });
      console.log(this.$router);
      
    }
  }
};
</script>